﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="renderer" content="webkit">
    <title>模版页</title>
    <link rel="stylesheet" href="../../css/bootstrap/bootstrap.css" />
    <link rel="stylesheet" href="../../css/fonts/icomoon/style.css" />
    <!--插件样式 begin-->
    <link rel="stylesheet" href="../../plugins/fullcalendar/fullcalendar.min.css">
    <link rel="stylesheet" href="../../plugins/datetimepicker/bootstrap-datetimepicker.css">
    <!--<link href="../../plugins/prism/prism.css" rel="stylesheet" />&lt;!&ndash;此文件用于模板展示，开发不要引用&ndash;&gt;-->
    <!--插件样式 end-->
    <link rel="stylesheet" href="../../css/theme/default/style.scss" />
    <link rel="stylesheet" href="../../css/demo.scss" />
    <!--[if lt IE 9]>
        <script src="../../js/bootstrap/compatible/html5shiv.min.js"></script>
        <script src="../../js/bootstrap/compatible/respond.min.js"></script>
    <![endif]-->
    <style>
        main .content { width: 1000px !important; margin: auto; }
        .modal-footer button { min-width: 80px; }
        .row-label { line-height: 34px; white-space: nowrap; }
        .event-project {  }
        .event-reimburse { border-color: #4cae4c; background-color: #5cb85c; }
    </style>
</head>
<body>
    <div class="container" data-struct="header footer">
        <header class="header">
            <link rel="import" href="../../component/header/header.html?__inline" />
        </header>
        <main class="wrapper">
            <aside class="aside"></aside>
            <article class="content">
                <div id="fullCalendar"></div>
            </article>
        </main>
        <footer class="footer">
            <link rel="import" href="../../component/footer/footer.html?__inline" />
        </footer>
    </div>
    <div id="acModal" class="modal middle fade">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">选择操作</h4>
                </div>
                <div class="modal-body">
                    <p class="clearfix">
                        <button id="btnAssignProject" class="btn btn-primary col-xs-12">指派项目</button>
                    </p>
                    <div class="clearfix">
                        <button id="btnReimburseExpense" class="btn btn-success col-xs-12">报销费用</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="myModal" class="modal middle fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal Title</h4>
                </div>
                <div class="modal-body">
                    <div id="panel1" class="hidden">
                        <form id="form1">
                            <p class="row">
                                <span class="col-xs-3 row-label">
                                    项目名称：
                                </span>
                                <span class="col-xs-9">
                                    <input id="txtProjectName" type="text" class="form-control" required />
                                </span>
                            </p>
                            <p class="row">
                                <span class="col-xs-3 row-label">
                                    开始时间：
                                </span>
                                <span class="col-xs-9">
                                    <input id="txtProjectStart" type="text" class="form-control" role="datetimepicker" required />
                                </span>
                            </p>
                            <div class="row">
                                <span class="col-xs-3 row-label">
                                    结束时间：
                                </span>
                                <span class="col-xs-9">
                                    <input id="txtProjectEnd" type="text" class="form-control" role="datetimepicker" required />
                                </span>
                            </div>
                            <button type="submit" class="hidden"></button>
                        </form>
                    </div>
                    <div id="panel2" class="hidden">
                        <form id="form2">
                            <p class="row">
                                <span class="col-xs-3 row-label">
                                    项目名称：
                                </span>
                                <span class="col-xs-9">
                                    <input id="txtReimburseProjectName" type="text" class="form-control" required />
                                </span>
                            </p>
                            <p class="row">
                                <span class="col-xs-3 row-label">
                                    报销日期：
                                </span>
                                <span class="col-xs-9">
                                    <input id="txtReimburseDate" type="text" class="form-control" role="datetimepicker" required />
                                </span>
                            </p>
                            <div class="row">
                                <span class="col-xs-3 row-label">
                                    报销发票：
                                </span>
                                <span class="col-xs-9">
                                    <input id="txtReimburseTicket" type="file" class="form-control" />
                                </span>
                            </div>
                            <button type="submit" class="hidden"></button>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-action="confirm">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script src="../../js/jquery/jquery-1.11.2.js"></script>
    <script src="../../js/bootstrap/bootstrap.js"></script>
    <!--插件脚本 begin-->
    <script src="../../plugins/datetimepicker/bootstrap-datetimepicker.js"></script>
    <script src="../../plugins/datetimepicker/lang/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../../plugins/fullcalendar/moment.min.js"></script>
    <script src="../../plugins/fullcalendar/fullcalendar.min.js"></script>
    <script src="../../plugins/fullcalendar/lang/zh-cn.js"></script>
    <!--<script src="../../plugins/multiselect/multiselect.js"></script>-->
    <!--插件脚本 end-->
    <script src="../../js/global.js"></script>
    <script type="text/javascript">
        $(function () {

            var $calendar = $('#fullCalendar');
            var $acModal = $("#acModal");
            var $myModal = $("#myModal");
            var $txtProjectName = $("#txtProjectName");
            var $txtProjectStart = $("#txtProjectStart");
            var $txtProjectEnd = $("#txtProjectEnd");
            var $txtReimburseProjectName = $("#txtReimburseProjectName");
            var $txtReimburseDate = $("#txtReimburseDate");
            var selectedDate = null;

            $("[role='datetimepicker']").datetimepicker({
                autoclose: 1,
                format: 'yyyy-mm-dd',
                language: 'zh-CN',
                minView: 2,
                startView: 2
            });

            $("#btnAssignProject").click(function () {
                $txtProjectStart.val(selectedDate.format("yyyy-MM-dd"));
                $myModal.openModal({
                    title: "指派项目",
                    panel: "#panel1",
                    confirm: function () {
                        $("#form1 :submit").click();
                    }
                });
            });
            $("#btnReimburseExpense").click(function () {
                $txtReimburseDate.val(selectedDate.format("yyyy-MM-dd"));
                $myModal.openModal({
                    title: "费用报销",
                    panel: "#panel2",
                    confirm: function () {
                        $("#form2 :submit").click();
                    }
                });
            });

            // 指派项目表单
            $("#form1").submit(function (e) {
                e.preventDefault();
                var projectName  = $txtProjectName.val();
                var projectStart = $txtProjectStart.val();
                var projectEnd   = new Date($txtProjectEnd.val()).addDay(1).format("yyyy-MM-dd");
                $calendar.fullCalendar("renderEvent", { title: "项目：" + projectName, start: projectStart, end: projectEnd, className: ["event-project"] });
                $myModal.modal("hide");
                $acModal.modal("hide");
            });

            $("#form2").submit(function (e) {
                e.preventDefault();
                var projectName  = $txtReimburseProjectName.val();
                var reimburseDate = $txtReimburseDate.val();
                $calendar.fullCalendar("renderEvent", { title: "报销：" + projectName, start: reimburseDate, className: ["event-reimburse"] });
                $myModal.modal("hide");
                $acModal.modal("hide");
            });

            $myModal.on("hidden.bs.modal", function () {
                $myModal.find("input[type='text']").val("");
            });

            $calendar.fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                //defaultDate: '2015-02-12',
                lang: "zh-cn",
                buttonIcons: false, // show the prev/next text
                //weekNumbers: true,
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                dayClick: function (e) {
                    selectedDate = e._d;
                    $acModal.modal();
                },
                eventClick: function(e){

                },
                events: [
                    //{ title: 'All Day Event', start: '2015-02-01' },
                    //{ title: 'Long Event', start: '2016-04-01', end: '2016-04-03' },
                    //{ id: 999, title: 'Repeating Event', start: '2015-02-09T16:00:00' },
                    //{ id: 999, title: 'Repeating Event', start: '2015-02-16T16:00:00' },
                    //{ title: 'Conference', start: '2015-02-11', end: '2015-02-13' },
                    //{ title: 'Meeting', start: '2015-02-12T10:30:00', end: '2015-02-12T12:30:00' },
                    //{ title: 'Lunch', start: '2015-02-12T12:00:00' },
                    //{ title: 'Meeting', start: '2015-02-12T14:30:00' },
                    //{ title: 'Happy Hour', start: '2015-02-12T17:30:00' },
                    //{ title: 'Dinner', start: '2015-02-12T20:00:00' },
                    //{ title: 'Birthday Party', start: '2015-02-13T07:00:00' },
                    //{ title: 'Click for Google', url: 'http://www.google.com/', start: '2015-02-28' }
                ]
            });

        })
    </script>
    <!--<script src="../../plugins/prism/prism.js"></script>&lt;!&ndash;此文件用于模板展示，开发不要引用&ndash;&gt;-->
</body>
</html>